// components/refresh-scroll/index.js
import { getSafeArea, sleep } from '../../utils/util'

Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
		refresherEnabled: { // 开启自定义下拉刷新
			type: Boolean,
			value: true
		},
		showScrollbar: { // 是否显示滚动条
			type: Boolean,
			value: true
		},
		bottomLoading: { // 是否显示底部加载
			type: Boolean,
			value: true
		},
		hasMore: { // 是否有更多数据
			type: Boolean,
			value: false
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		_isTriggered: false,   	// 设置下拉刷新状态，true刷新被触发，false刷新未被触发
		_isThreshold: false,		// 是否到达下拉阈值，true到达，false未到达
		_scrollTop: 0,
		_scrollHeight: '100%'
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		// 下拉刷新被触发
		_onRefresh() {
			if (this._freshing) return
			this._freshing = true

			this.triggerEvent('refresh', {
				refreshFinish: async () => {
					await sleep(1000)
					this.setData({
						_isTriggered: false,
					})
					this._freshing = false
				}
			})
		},

		// 下拉刷新到达阈值
		_reachThreshold() {
			!this.data._isThreshold && this.setData({
				_isThreshold: true
			})
		},

		// 取消下拉刷新到达阈值
		_removeThreshold() {
			this.data._isThreshold && this.setData({
				_isThreshold: false
			})
		},

		// 滚动到底部
		_onReachBottom(event) {			
			if (event.timeStamp - this._timeStamp < 1000) return
			this._timeStamp = event.timeStamp

			this.triggerEvent('scrollbottom')
		},

		// 滚动时触发
		_onScroll(event) {
			this.triggerEvent('scroll', event.detail)
		},

		// 以下方法由父组件调用
		// 设置scroll高度
		async getScrollHeight() {
			// 获取设备信息 此方法用于延迟 确保其他页面已经获取设备信息
			await getSafeArea()
			wx.createSelectorQuery()
				.in(this)
				.select('#scroll')
				.boundingClientRect(({ top }) => {
					this.setData({
						_scrollHeight: `calc(100vh - ${top}px)`
					})
				}).exec()
		},

		// 回到顶部
		onScrollTop() {
			this.setData({
				_scrollTop: 0
			})
		}
	}
})
